<template>
  <div>

    <div style="width: 83%;margin: auto;margin-top: 0.9rem">
      <p class="p1">账号注册</p>

      <div style="margin-top: 0.6rem;overflow: hidden">

        <div class="shouji" style="margin-top: 0.7rem">
          <img src="../../../src/assets/img/person/shouji.png" alt="">
          <input type="number" pattern="\d*" placeholder="请输入您的手机号" class="input1" v-model="phone">
        </div>
				<div class="phonetis" v-if='phonewrong'>请输入正确手机号</div>
				<div class="phonetis" v-if='phonestatus'>请输入手机号</div>
        <div class="yanzheng">
          <img src="../../../src/assets/img/person/yanzheng.png" alt="">
          <input type="number" pattern="\d*" placeholder="请输入验证码"  v-model="code">
          <mt-button type="primary" plain v-if='entercode' plain class="btnnn sendactive">重新发送<span>({{timecode}}s)</span></mt-button>
          <mt-button type="primary" plain v-else plain class="btnnn" @click='enterlogincode'>获取验证码</mt-button>
        </div>
		<div class="phonetis" v-if='codestatus'>请输入验证码</div>
        <div class="shouji" style="margin-top: 0.7rem">
          <img src="../../../src/assets/img/person/mima.png" alt="">
          <input type="password" pattern="\d*" placeholder="请输入6-15位密码" class="input1" v-model="password">
        </div>
				<div class="phonetis" v-if='passwordstatus1'>密码过短</div>
				<div class="phonetis" v-if='passwordstatus2'>密码过长</div>
        <!-- <div class="shouji" style="margin-top: 0.7rem">
          <img src="../../../src/assets/img/person/zhuce.png" alt="">
          <input type="text" pattern="\d*" placeholder="请输入注册码（选填）" class="input1"  v-model="yao">
        </div> -->
        <!-- <mt-button type="primary" plain class="btn111" :class='(!phonestatus&&!phonewrong&&!codestatus&&!passwordstatus1&&!passwordstatus2)?"btnactive":""' @click="enter()">注册</mt-button> -->
				<!-- <mt-button v-if='phonestatus||phonewrong||codestatus||passwordstatus1||passwordstatus2' type="primary" plain class="btn111"  @click="enter()">注册</mt-button> -->
				<mt-button type="primary" v-if='code==""||phone==""||password==""' plain class="btn111" @click="enter()">注册</mt-button>
				<mt-button type="primary" v-else plain class="btn111 butactive" @click="enter()">注册</mt-button>
      </div>
			
			<!-- 设置密码弹窗 -->
			<div class="shoewr-chenhoupass">
				<div class="chen-contener chenpass">
					<p class="chen-title">温馨提示</p>
					<p class="chen-text">您的账号({{tel}})已在平台注册，请前去登录</p>
					<div class="chen-but">
						<p class="chen-but-no" @click="repeatclose()">取消</p>
						<p class="chen-but-yes" @click="repeatclick()">去登录</p>
					</div>
				</div>
			</div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "Zhzhuce",
    data(){
      return{
        entercode:false,
		timecode:60,
		phone:'',
		code:'',
		password:'',
		yao:'',
		phonestatus:false,
		phonewrong:false,
		codestatus:false,
		passwordstatus1:false,   //密码过短
		passwordstatus2:false,//密码过长
		tel:'',
		is_register:'',
      }
    },
		methods:{
			// 点击取消
			repeatclose(){
				$('.shoewr-chenhoupass').fadeOut();
			},
			// 点击去登录
			repeatclick(){
				$('.shoewr-chenhoupass').fadeOut();
				this.d();
			},
			// 点击获取验证码
			enterlogincode(){
				var that = this;
				if(that.phone==''){
					this.$toast({
					  message:'请输入手机号',
					  position:'center'
					});
				}else if(!(/^1\d{10}$/.test(this.phone))){
				// }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
					this.$toast({
					  message:'请输入正确的手机号',
					  position:'center'
					});
				}else{
					if(this.is_register==1||this.is_register=='1'){
						$('.shoewr-chenhoupass').fadeIn();
					}else{
						this.entercode = true;
						var times = 60;
						var that = this;
						var timer = setInterval(function () {
							times--;
							that.timecode = times
							// console.log(that.timecode)
						
							if (times <= 0) {
								clearInterval(timer);
								that.entercode = false;
							}
						}, 1000)
						that.axios.get(that.$store.state.url + "sms/getSmsCode",{
							params:{
								tel:that.phone,
							}
						}).then(res=>{
							if (res.data.errcode == 0||res.data.errcode == '0'){
								// console.log(res.data)
								that.$toast({
									message:res.data.msg,
									position:'bottom'
								});
							}else {
								that.$toast({
									message:res.data.msg,
									position:'bottom'
								});
							}
						
						})
					}
				}
			},
			// 点击注册
			enter(){
				var that = this;
				if(that.phone==''){
					that.$toast({
					  message:'请输入手机号',
					  position:'center'
					});
				}else if(!(/^1\d{10}$/.test(that.phone))){
				// }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.phone))){
					that.$toast({
					  message:'请输入正确的手机号',
					  position:'center'
					});
				}else if(that.code==''){
					that.$toast({
					  message:'请输入验证码',
					  position:'center'
					});
				}else if(that.password==''){
					that.$toast({
					  message:'请输入密码',
					  position:'center'
					});
				}else if(that.passwordstatus1){
					that.$toast({
					  message:'密码过短',
					  position:'center'
					});
				}else if(that.passwordstatus2){
					that.$toast({
					  message:'密码过长',
					  position:'center'
					});
				}else{
					var url = that.$store.state.url + "User/register"
					var data ={
						tel:that.phone,
						password:that.password,
						code:that.code,
						// invite:that.yao,
					}
					that.axios({
						method:"POST",
						url:url,
						data:data,
					}).then(res=>{
						// console.log(res);
						var data = res.data;
						if(data.errcode==0||data.errcode=='0'){
							that.$toast({
							  message:'注册成功',
								position:'center'
							});
							setTimeout(function(){
								that.$router.push({
								  path:'/denglu'
								})
							},1500)
						}else{
							this.$toast({
						    message:res.data.msg,
								position:'center'
					    });
						}
					})
				}
			},	
			
		},
		watch:{
			// 判断手机号
			phone(){
				// console.log(888);
				if(this.phone==''){
					this.phonestatus=true;
					this.phonewrong=false;
				}else if(!(/^1\d{10}$/.test(this.phone))){
				// }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
					this.phonestatus=false;
					this.phonewrong=true;
				}else{
					this.phonestatus=false;
					this.phonewrong=false;
					// if ((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
						this.axios({
							method:"GET",
							url:this.$store.state.url + "User/checkAccount",
							params:{
								tel:this.phone,
								type:2
							}
						}).then(res=>{
							if(res.data.errcode==0||res.data.errcode=='0'){
								var data = res.data.data;
								// console.log(data);
								this.is_register = data.is_register;
								if(data.is_register==1||data.is_register=='1'){
									var tel1 = this.phone;
									this.tel = tel1.substr(0,3) + "****" + tel1.substr(7);
									$('.shoewr-chenhoupass').fadeIn();
								}
							}
						})
					// }
				}
			},
			// 验证码
			code(){
				if(this.code==''){
					this.codestatus=true
				}
			},
			password(){
				if(this.code==''){
					this.codestatus=true
				}
				if(this.phone==''){
					this.phonestatus=true;
					this.phonewrong=false;
				}else if(!(/^1\d{10}$/.test(this.phone))){
				// }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
					this.phonestatus=false;
					this.phonewrong=true;
				}else{
					this.phonestatus=false;
					this.phonewrong=false;
				}
				var password=this.password;
				var len = password.length;
				// console.log(password.length);
				if(len<6||len<'6'){
					this.passwordstatus1=true;
					this.passwordstatus2=false;
				}else if(len>15||len>'15'){
					this.passwordstatus2=true;
					this.passwordstatus1=false;
				}else{
					this.passwordstatus2=false;
					this.passwordstatus1=false;
				}
			}
		},
		mounted(){
			this.sdk.getJSSDK('','',this.$store.state.url);	
			
		}
  }
</script>

<style scoped>
	.phonetis{
		color: #FE3434;
		font-size: .26rem;
		text-align: right;
		margin-top: .13rem;
	}
  .p1{
    font-size:0.5rem;
    font-weight:800;
    color:rgba(51,51,51,1);
  }
  .shouji{
    position: relative;
    height: 0.7rem;
  }
  .shouji img{
    width: 0.4rem;
    position: absolute;
    left: 0;
    bottom: 0.18rem;
  }
  .input1{
    width: 100%;
    height: 0.7rem;
    border-bottom: 0.01rem solid rgba(237,237,237,1);
    text-indent: 0.6rem;
  }
  input{
    border: none;
    outline: none;
    font-size: 0.3rem;
  }
  input::placeholder{
    font-size:0.3rem;
    color:rgba(153,153,153,1);
  }
  input:focus::placeholder{
    color: transparent;
  }
  .yanzheng{
    width: 100%;
    height: 0.9rem;
    border-bottom: 0.01rem solid rgba(237,237,237,1);
    margin-top: 0.4rem;
    position: relative;
  }
  .yanzheng img{
    width: 0.4rem;
    position: absolute;
    left: 0;
    bottom: 0.1rem;
  }
  .yanzheng input{
    width: 50%;
    float: left;
    margin-top: 0.4rem;
    text-indent: 0.6rem;
  }
  .btnnn {
    /* width:2.4rem; */
    height:0.76rem;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(2,135,255,1);
    border-radius:0.38rem;
    font-size:0.3rem;
    font-weight:500;
    color:rgba(2,135,255,1);
    float: right;
    margin-bottom: 0.2rem;
		padding: 0 .2rem;
  }
	.btnnn.sendactive{
		border: 1px solid #EDEDED;
		background: #EDEDED;
		color: #999999;
	}
  .btn111{
    width: 100%;
    height: 0.88rem;
    font-size: 0.3rem;
    border-radius:0.44rem;
    background:#EDEDED;
		color: #999999;
    margin-top: 0.8rem;
		border: 1px solid #EDEDED;
  }
	.butactive{
		background:rgba(2,135,255,1) !important;
		color: #fff !important;
		border: 1px solid ##0287FF;
	}
</style>
